<template>
  <panel :tabs='tabs'
         @onTabChange='onTabChange'
    >
    <van-button size="mini" slot="right" round>{{ btnText }}</van-button>

    <swipe :width="width" v-show="isNewSong" key="newSong">
      <swipe-item v-for="(songs, index) of songList" :key="index" >
        <div class="songs-wrapper">
          <card v-for="(song, index) of songs"
                :image='song.picUrl'
                :title="song.name"
                :imageWidth='50'
                :imageHeight='50'
                :subTitle='song.singers'
                :key="index"
                class="song"
                direction="row"
          >
          <i slot="row-right" class="iconfont icon-bofang1"/>
          </card>
        </div>
      </swipe-item>
    </swipe>
    <swipe :width="width" v-show="!isNewSong" key="newAlbum">
      <swipe-item v-for="(albums, index) of albumList" :key="index" >
        <div class="songs-wrapper">
          <card v-for="(album, index) of albums"
                :image='album.picUrl'
                :title="album.name"
                :imageWidth='50'
                :imageHeight='50'
                :subTitle='album.singers'
                :key="index"
                class="song"
                direction="row"
          >
          </card>
        </div>
      </swipe-item>
    </swipe>
  </panel>
</template>
<script>
import Swipe from 'base/swipe/swipe'
import SwipeItem from 'base/swipe/swipe-item'
import Card from 'base/card'
import Panel from 'base/panel'
import { newsong } from 'api/personalized'
import { album } from 'api/top'
import Song from '@/entity/Song'
import Album from '@/entity/Album'

const tabs = [{ name: '新歌', value: 0 }, { name: '新碟', value: 1 }]

export default {
  components: {
    Card,
    Panel,
    Swipe,
    SwipeItem
  },
  data() {
    return {
      disc: [],
      songList: [],
      albumList: [],
      active: tabs[0],
    }
  },
  mounted() {
    this.getNewSong()
    this.getNewAlbum()
  },
  computed: {
    width() {
      return window.screen.width * 0.9
    },
    tabs() {
      return tabs
    },
    isNewSong() {
      return this.active.value === 0
    },
    btnText() {
      return `更多${this.active.name}`
    }
  },
  methods: {
    onTabChange(tab) {
      this.active = tab
    },
    getNewSong() {
      newsong().then(res => {
        const { result } = res
        const len = result.length > 6 ? 6 : result.length
        let songList = []

        for (let index = 0; index < len; index++) {
          let song = {
            ...result[index],
            ...result[index].song
          }
          if (index % 3 === 0) {
            songList.push([new Song(song)])
          } else {
            songList[songList.length - 1].push(new Song(song))
          }
        }
        this.songList = songList
      })
    },
    getNewAlbum() {
      album().then(res => {
        const { albums } = res
        const len = albums.length > 6 ? 6 : albums.length
        let albumList = []

        for (let index = 0; index < len; index++) {
          let album = albums[index]
          if (index % 3 === 0) {
            albumList.push([new Album(album)])
          } else {
            albumList[albumList.length - 1].push(new Album(album))
          }
        }
        this.albumList = albumList
      })
    },
    getTwoDimensionalArray(array) {
      const len = array.length > 6 ? 6 : array.length
      let res = []
      for (let index = 0; index < len; index++) {
        if (index % 3 === 0) {
          res.push([new Song(array[index])])
        } else {
          res[res.length - 1].push(new Song(array[index]))
        }
      }
      return res
    }
  }
}
</script>
<style lang="less" scoped>
.recommendCard{
  /deep/ .column-content{
    text-align: left;
  }
}
.songs-wrapper{
  padding-left: 5px;
  .song{
    margin: 10px 0;
  }
}
</style>
